<!-- 
 
  该组件,主要是解决环形进度条,可以实现动画加载的效果,
  如果没有动画效果,建议使用: https://element-plus.gitee.io/zh-CN/component/progress.html
 -->
 <template>
    <div class="progress" >
      <svg viewBox="0 0 96 96" class="svg-circle-progress" style="width: 160px; height: 160px">
        <circle
          r="40"
          cx="48"
          cy="48"
          fill="none"
          stroke-miterlimit="20"
          stroke-width="6"
          class="svg-progress"
          style="stroke-dasharray: 275, 251.602; stroke: #f00"
        ></circle>
        <circle
          r="40"
          v-if="progressValue"
          cx="48"
          cy="48"
          fill="none"
          stroke-miterlimit="20"
          stroke-width="10"
          class="svg-progress"
          :style="`stroke-dasharray: ${progressValue}, 251.602;stroke:${color};`"
        ></circle>
      </svg>
      <div class="mask">
        <span class="bigData"> {{ showProgress }} </span> %
      </div>
    </div>
    </template>
  <script setup >
    import { ref, toRefs, watch, onMounted } from 'vue';
  
    const props = defineProps({
      targetValue: {
        type: Number,
        require: true,
        default: -1,
      },
      color: {
        type: String,
        default: '#3d9b3d',
      },
      width: {
        type: String,
        default: '240px',
      },
      height: {
        type: String,
        default: '200px',
      },
    });
    const { height, width, color, targetValue } = toRefs(props);
  
    const showProgress = ref(0);
    const addData = () => {
        showProgress.value = 0
        if(targetValue.value === 0) return;
      let timer = setInterval(() => {
        if (targetValue.value === showProgress.value) {
          clearInterval(timer), timer == null;
          return;
        }
        ++showProgress.value;
      }, 15);
    };
    onMounted(() => {
    });
    const progressValue = ref((showProgress.value / 100) * 251);
  
    watch(showProgress, (newValue) => {
      progressValue.value = (newValue / 100) * 251;
    });

    watch(()=>props.targetValue,()=>{
      addData();
    },{
      immediate:true
    })
  </script>
  <style  lang="scss" scoped>
    .progress {
      display: inline-block;
      position: relative;
      text-align: center;
    }
    .svg-circle-progress {
      position: relative;
      transform: rotate(90deg);
    }
    .svg-progress {
      stroke: #2196f3;
      stroke-linecap: round;
      transition: all 0.3s linear;
    }
    .mask {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .bigData {
        font-size: 30px;
        font-weight: 500;
      }
    }
  </style>
  
  